<template>
    <div>
        <el-row style="margin: 0px 0px 10px 0px">
            <div class="formbox">
                <div class="form-input">
                    <div class="grid-content bg-purple"><span size="small" class="from-name">群号/ID/群名称：</span>
                        <el-input size="small" v-model="input" placeholder="请输入内容" style="width: 160px"></el-input>
                    </div>
                </div>
                <div class="form-input">
                    <div class="grid-content bg-purple-light"><span size="small" class="from-name">聊天内容：</span>
                        <el-input size="small" v-model="input" placeholder="请输入内容" style="width:160px"></el-input>
                    </div>
                </div>
                <div class="form-input">
                    <div class="grid-content bg-purple">
                        <div class="demo-input-suffix">
                            <span size="small" class="from-name">聊天时间：</span>
                            <el-date-picker size="small"
                                            v-model="value4"
                                            type="datetimerange"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                    </div>
                </div>
                <div class="form-input">
                    <div class="grid-content bg-purple-light">
                        <el-button type="primary" size="mini"><i class="el-icon-search"
                                                                 style="font-size:14px; margin: 0px 4px 0px 0px;"></i>查询
                        </el-button>
                    </div>
                </div>
            </div>
        </el-row>

        <el-row style=" border: 1px solid #f6f6f8; height: 740px; border-radius: 4px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark"
                     style="height: 40px; background: #56aaff; border-radius: 4px 4px 0px 0px;">
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div><i class="q-icon-chat"
                            ></i><span
                                    class="q-lt">群聊天记录 ( 24 )</span></div>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <div class="grid-content bg-purple-light"><i class="q-admin-chat"
                        ></i><span
                                class="q-lt">5532878212（未来的旅途之友）   318人</span></div>
                    </el-col>

                </div>
            </el-col>
            <div>
                <el-col :span="6">
                    <div class="grid-content bg-purple" style="height: 700px; background: #edf5fc;">
                        <div class="q-name-top">
                            <div class="q-name"><i class="q-icon-name"></i><span class="q-text-name">748432437322（现代城业主群）</span><span
                                    class="q-text-nub">152人</span></div>
                            <div class="q-name"><i class="q-icon-name"></i><span class="q-text-name">748432437322（现代城业主群）</span><span
                                    class="q-text-nub">152人</span></div>
                            <div class="q-name"><i class=" q-icon-name"></i><span class="q-text-name">748432437322（现代城业主群）</span><span
                                    class="q-text-nub">152人</span></div>
                        </div>

                        <div class="q-tit"><i class="q-user-name"></i><span
                                class="q-lt">群成员 ( 8 )</span></div>
                        <div class="q-name-bot">


                            <div class="q-name"><i class=" q-icon-admin"></i><span class="q-text-name">748432437322（现代城业主群）</span><span
                                    class="q-text-nub">152人</span></div>
                            <div class="q-name"><i class="q-icon-admin"></i><span class="q-text-name">748432437322（现代城业主群）</span><span
                                    class="q-text-nub">152人</span></div>
                            <div class="q-name"><i class=" q-icon-admin"></i><span class="q-text-name">748432437322（现代城业主群）</span><span
                                    class="q-text-nub">152人</span></div>


                        </div>


                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="grid-content bg-purple-light">
                        <div class="q-name-r">
                            <div class="q-chat clearfix"><a href="" class="q-icon-tx"><img title=""
                                                                                           src="../assets/tx.png"></a>
                                <div class="chat-dial">
                                    <p class="q-text-chat"><span class="q-chat-name">40877523(冰冰雨) </span> <span
                                            class="q-chat-name" style="margin: 0px 0px 0px 20px">张斌</span><span
                                            class="q-text-nub" style="color: #93999F">2018-11-21  22:31:17</span></p>
                                    <p class="q-text-chat"><span class="q-text-name">吃了吗？</span></p></div>
                            </div>
                            <div class="q-chat"><a href="" class="q-icon-tx"><img title="" src="../assets/tx.png"></a>
                                <div class="chat-dial">
                                    <p class="q-text-chat"><span class="q-chat-name">40877523(冰冰雨) </span> <span
                                            class="q-chat-name" style="margin: 0px 0px 0px 20px">张斌</span><span
                                            class="q-text-nub" style="color: #93999F">2018-11-21  22:31:17</span></p>
                                    <p class="q-text-chat"><span class="q-text-name">吃了吗？</span></p></div>
                            </div>
                            <div class="q-chat"><a href="" class="q-icon-tx"><img title="" src="../assets/tx.png"></a>
                                <div class="chat-dial">
                                    <p class="q-text-chat"><span class="q-chat-name">40877523(冰冰雨) </span> <span
                                            class="q-chat-name" style="margin: 0px 0px 0px 20px">张斌</span><span
                                            class="q-text-nub" style="color: #93999F">2018-11-21  22:31:17</span></p>
                                    <p class="q-text-chat"><span class="q-text-name">吃了吗？</span></p></div>
                            </div>
                            <div class="q-chat"><a href="" class="q-icon-tx"><img title="" src="../assets/tx.png"></a>
                                <div class="chat-dial">
                                    <p class="q-text-chat"><span class="q-chat-name">40877523(冰冰雨) </span> <span
                                            class="q-chat-name" style="margin: 0px 0px 0px 20px">张斌</span><span
                                            class="q-text-nub" style="color: #93999F">2018-11-21  22:31:17</span></p>
                                    <p class="q-text-chat"><span class="q-text-name">吃了吗？</span></p></div>
                            </div>
                            <div class="q-chat"><a href="" class="q-icon-tx"><img title="" src="../assets/tx.png"></a>
                                <div class="chat-dial">
                                    <p class="q-text-chat"><span class="q-chat-name">40877523(冰冰雨) </span> <span
                                            class="q-chat-name" style="margin: 0px 0px 0px 20px">张斌</span> <span
                                            class="q-text-nub" style="color: #93999F">2018-11-21  22:31:17</span></p>
                                    <p class="q-text-chat"><span class="q-text-name">吃了吗？</span></p></div>
                            </div>
                            <div class="q-chat"><a href="" class="q-icon-tx"><img title="" src="../assets/tx.png"></a>
                                <div class="chat-dial">
                                    <p class="q-text-chat"><span class="q-chat-name">40877523(冰冰雨) </span> <span
                                            class="q-chat-name" style="margin: 0px 0px 0px 20px">张斌</span><span
                                            class="q-text-nub" style="color: #93999F">2018-11-21  22:31:17</span></p>
                                    <p class="q-text-chat"><span class="q-text-name">吃了吗？</span></p></div>
                            </div>
                            <div class="q-chat"><a href="" class="q-icon-tx"><img title="" src="../assets/tx.png"></a>
                                <div class="chat-dial">
                                    <p class="q-text-chat"><span class="q-chat-name">40877523(冰冰雨) </span> <span
                                            class="q-chat-name" style="margin: 0px 0px 0px 20px">张斌</span><span
                                            class="q-text-nub" style="color: #93999F">2018-11-21  22:31:17</span></p>
                                    <p class="q-text-chat"><span class="q-text-name">吃了吗？</span></p></div>
                            </div>

                        </div>

                    </div>
                    <el-pagination
                            layout="prev, pager, next"
                            :total="50">
                    </el-pagination>
                </el-col>
            </div>
        </el-row>


    </div>
</template>

<script>
    export default {
        name: "Chat",
        data() {
            return {
                //xxxx
                tableData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    },
                    {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    },
                    {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    },
                    {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }
                ],


            }
        }
    }
</script>

<style scoped>

    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    ul,
    li,
    p {
        margin: 0;
        padding: 0;
        font-weight: normal;
        list-style-type: none;
    }

    .clearfix:after {
        content: "\200B";
        display: block;
        height: 0;
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }

    .from-name {
        font-size: 14px;
    }

    .cx-btn {
        background: #0082ff;
        height: 40px;
    }

    .q-lt {
        color: #fff;
        line-height: 40px;
        font-size: 14px;
        display: block;
        font-weight: bold;
        float: left;
    }

    .q-name {
        font-size: 14px;
        line-height: 40px;
        height: 40px;
        color: #000;
    }

    .q-text-name, .q-icon-name, .q-icon-admin {
        display: block;
        float: left;
        font-size: 14px;
        color: #07111B;
        text-align: left;
    }

    .q-icon-chat, .q-admin-chat, .q-user-name {
        width: 18px;
        height: 18px;
        background: url("../assets/waico.png") left -129px;
        display: block;
        float: left;
        margin: 11px 8px 0px 10px;
    }

    .q-user-name {
        background: url("../assets/waico.png") -103px -129px;
    }

    .q-admin-chat {
        background: url("../assets/waico.png") -80px -129px;
    }

    .q-text-nub {
        display: block;
        float: right;
        font-size: 14px;
    }

    .q-icon-name, .q-icon-admin {

        background: url("../assets/waico.png") -27px -129px;
        margin: 10px 10px 0px 0px;

        width: 20px;
        height: 20px;
    }

    .q-icon-admin {
        background: url("../assets/waico.png") -57px -129px;
    }

    .q-name-top, .q-name-bot {
        background: #edf5fc;
        min-height: 280px;
        padding: 8px 15px 0px 15px;
    }

    .q-tit {
        background: #56aaff;
        height: 40px;
    }

    .q-chat {
        min-height: 80px;
        border-bottom: 1px solid #f6f6f8;
        position: relative;
    }

    .q-name-r {
        padding: 8px 15px 0px 15px;
        min-height: 580px;
    }

    .q-icon-tx {
        display: block;
        width: 50px;
        height: 50px;

        position: absolute;
        left: 0px;
        top: 2px;
        margin: 12px 10px 10px 10px;
    }

    .q-chat-name {
        float: left;
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        color: #07111B;
    }

    .chat-dial {
        width: 94%;
        display: block;
        float: left;
        margin: 10px 10px 10px 70px;
    }

    .q-text-chat {
        height: 30px;
        line-height: 30px;
    }

    .form-input {
        float: left;
        padding: 0px 10px 0px 0px;
    }

    .formbox {
        margin: 0px 0px 0px 10px;
    }

</style>